<template>
	<view>
		<u-navbar bgColor="#FFFFFF" :title="templateId == '1' ? '':'搜索绑定'" safeAreaInsetTop :placeholder="true"
			leftIconColor="#000000" :autoBack="true" titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
		</u-navbar>
		<view v-if="!loadingType && templateId == '1'">

			<!-- <u-navbar :safeAreaInsetTop="true" :fixed="true" :bgColor="'rgba(255,255,255)'" :autoBack="true"  :placeholder="true">
			</u-navbar> -->
			<view class="breo-top">
				<!-- <view class="top-tabbar"></view> -->
				<view class="top-font">
					<view class="font-breo">
						BREO
					</view>
					<view class="font-text">
						找回自己的节奏，回归身心平衡
					</view>
				</view>
			</view>
			<view class="breo-bottom">
				<view class="breo-Img">
					<!-- <view v-show="equipmentData.temperature < 60" :style="`opacity:${equipmentData.temperature < 60 ? '1' : '0'};background-size: cover;position: absolute;background-image: url(/static/ble/pageImg/highTemperatures.png); transition: all .3s; width: ${bleTypeImgData.width}rpx; height: ${bleTypeImgData.width}rpx;`"></view>
						<view v-show="equipmentData.temperature >= 60" :style="`opacity:${equipmentData.temperature >= 60 ? '1' : '0'}; background-size: cover;position: absolute;background-image: url(/static/ble/pageImg/normalTemperature.png); transition: all .3s; width: ${bleTypeImgData.width}rpx; height: ${bleTypeImgData.width}rpx;`"></view>
						  -->
					<image src="/static/ble/img_main_id.png" mode=""></image>
				</view>
				<view class="breo-btn">
					<view class="search-btn" @tap="onToSearch(1)">
						<text>{{textFont}}</text>
					</view>
					<view v-if="deviceId" :class="'search-btns'" class="search-btn" @tap="onToSearch(2)">
						<text>搜索设备</text>
					</view>
					<view class="equipment">
						还没有设备，去购买>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="templateTwo">
				<!-- <view class="demoName">
					<view class="fontText">
						本次使用
					</view>
					<view class="textProp">
						姜小竹数字孪生道具#1244
					</view>
				</view> -->
				<view class="swiperClass">
					<u-swiper :list="listImg" :circular="true" class="swiperClassU" height="500rpx"
						@change="onSwiperChange" :autoplay="true">
					</u-swiper>
					<view class="indicator">
						<view class="indicator__dot" v-for="(item, index) in listImg" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</view>
				<view class="bottomFont">
					<view class="search-btn" @tap="onToSearch(2)">
						<text>开始搜索</text>
					</view>
					<!-- <image class="slice" @tap="onToSearch(2)" src="/static/ble/slice.png" mode=""></image>
					<view class="sliceFont">
						<view class="">
							使用蓝牙连接智能硬件
						</view>
						<view class="">
							请点击上方图标进行搜索
						</view>
					</view> -->
					<view class="openTypeFont">
						<view class="fonts">
							<image src="/static/ble/warningIcon.png" mode=""></image>
							<text>绑定时请打开手机蓝牙</text>
						</view>
						<!-- <text class="texts">并确保手机蓝牙处于打开状态</text> -->
					</view>
				</view>
				<view class="bottomText">
					孪生道具首次绑定硬件后则自动激活
				</view>
			</view>
		</view>
		<u-loading-page style="z-index: 100;" :loading="loadingType" bgColor="#01D2D3" loadingColor="#01D2D3"
			loading-text=""></u-loading-page>
		<example-popup ref="examplePopups"></example-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Bluetooth from '@/pages/town/common/Bluetooth.js';
	import examplePopup from '@/pages/town/components/examplePopup.vue';
	import {
		banner
	} from '@/api/bluetooth.js'
	let bluetooth = new Bluetooth();
	export default {
		components: {
			examplePopup
		},
		data() {
			return {
				current: 0,
				templateId: "2", //模板ID
				now: 0,
				end: 10,
				setInterval: 0,
				textFont: '',
				deviceId: '',
				bleTypeImgData: { //图片大小
					width: 300,
					height: 300
				},
				equipmentData: {
					temperature: 25
				},
				id: '', //道具ID
				loadingType: true,
				listImg: []
			}
		},
		created() {
			this.loadingType = true
		},
		onShow() {
			this.$nextTick(() => {
				this.deviceId = uni.getStorageSync('deviceId')
				if (this.deviceId) {
					this.textFont = '返回设备'
				} else {
					this.textFont = '搜索设备'
				}
			})

		},
		onReady() {
			setTimeout(() => {
				this.loadingType = false
			}, 1500)
		},
		onLoad(e) {
			if (e.id) {
				this.ids = e.id
			}
			this.onBanner()
			setTimeout(() => {
				this.equipmentData.temperature = 61
			}, 2000)
			// this.setInterval = setInterval(() => {
			// 	this.countTime()
			// }, 1000)
		},
		computed: {},
		methods: {
			//用户点击单选按钮回调
			onPromptFun(id){
				switch(id){
					case 1:
						this.$refs.examplePopups.onClose();
						break;
					default:
						break;
				}
			},
			//获取banner
			async onBanner() {
				try {
					var banners = await banner()
					banners.data.forEach((item, index) => {
						this.listImg.push(item.image)
					})
				} catch (e) {
					this.$refs.examplePopups.onPrompt(true, '提示', e.message,'', 1, 'components');
				}
			},
			onSwiperChange(e) {
				this.current = e.current
			},

			onConnect() {
				if (this.deviceId) {
					//连接某个BLE蓝牙
					let deviceId = this.deviceId
					bluetooth.createBLEConnection(deviceId).then(res => {
						bluetooth.getBLEDeviceServices().then(service => {
							let i;
							if (uni.getSystemInfoSync().platform == 'android') {
								i = 0
								uni.setStorageSync('servicesId', service[i].uuid);
								bluetooth.getBLEDeviceCharacteristics(2).then(rest => {
									uni.setStorageSync('servicesId', service[2]
										.uuid); //安卓会返三个ID 需要拿第一个ID当作servicesId  第三个的ID拿取返回需要的值
									this.onResdBle();
								});
							} else {
								i = 0
								uni.setStorageSync('serviceId', service[i].uuid);
								this.onResdBle();
							}
						})
					})
				} else {
					uni.navigateTo({
						url: './search',
						animationType: 'slide-in-right',
						animationDuration: 1000
					})
				}
			},
			//返回设备
			async onResdBle() {
				bluetooth.getBLEDeviceCharacteristics().then(ints => {
					bluetooth.notifyBLECharacteristicValue().then(infos => {
						uni.navigateTo({
							url: './manipulation',
							animationType: 'slide-in-right',
							animationDuration: 1000
						})
					}); //开始启用notify功能
				});
			},

			//判断蓝牙地理位置初始化  并做后续操作
			async onToSearch(item) {
				if (uni.getSystemInfoSync().platform == 'android') {
					try {
						let getLocations = await this.getLocation();
						this.onSearchs(item);
						console.log(111, getLocations)
					} catch (e) {
						this.$refs.uToast.show({
							type: 'default',
							message: '请打开定位服务功能'
						});
					}
				} else {
					this.onSearchs(item);
				}
			},
			//安卓用户判断是否开启位置权限 若没开启低版本机型无法搜索到设备 嘻嘻
			getLocation() {
				return new Promise((resolve, reject) => {
					uni.getSystemInfo({
						success: function(res) {
							var platform = res.platform;
							if (platform === 'android') {
								var context = plus.android.importClass("android.content.Context");
								var locationManager = plus.android.importClass(
									"android.location.LocationManager");
								var main = plus.android.runtimeMainActivity();
								var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
								if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
									reject(false)
								} else {
									resolve(true)
								}
							}
						}
					})
				})
			},
			onSearchs(item) {
				bluetooth.openBluetoothAdapter().then((res) => {
					bluetooth.getBluetoothAdapterState().then((res) => {
						if (item == 1) {
							this.onConnect();
						} else {
							this.onSearch();
						}
					})
				}).catch((err) => {
					uni.showToast({
						title: '蓝牙未打开',
						icon: 'none',
						duration: 2000
					})
				})
			},
			//跳转搜索蓝牙
			onSearch() {
				uni.navigateTo({
					url: `./search?id=${this.ids}`,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
		}
	}
</script>

<style>
</style>
<style>
	body {
		background: #FAFAFA;
	}
</style>
<style lang="scss">
	.templateTwo {
		.demoName {
			text-align: center;
			padding: 60rpx 0 80rpx;

			.fontText {
				font-size: 28rpx;
				margin-bottom: 24rpx;
				color: #a2a2a2;
			}

			.textProp {
				color: #000000;
				font-weight: 400;
				font-size: 36rpx;
			}
		}

		.swiperClass {
			text-align: center;
			margin: 180rpx 0;

			.swiperClassU {
				background: #FFFFFF !important;
				width: 440rpx;
				height: 500rpx !important;
				margin: 0 auto;

				::v-deep .u-swiper__wrapper__item {
					width: 90% !important;
					left: 0px;
					right: 0px;
					padding: 0 22rpx;
				}
			}

			.indicator {
				@include flex(row);
				justify-content: center;
				margin-top: 48rpx;

				&__dot {
					height: 18rpx;
					width: 18rpx;
					border-radius: 100px;
					background-color: #bfbfbf;
					margin: 0 5px;
					transition: background-color 0.3s;

					&--active {
						background-color: #000000;
					}
				}
			}
		}

		.bottomFont {
			text-align: center;
			padding: 120rpx 0 106rpx;

			.search-btn {
				background: #5EB1FF;
				box-shadow: 0px 2px 15px 0px rgba(1, 210, 211, 0.31);
				border-radius: 45px;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 100rpx;
				padding: 24rpx 0;
				margin-bottom: 40rpx;
			}

			.slice {
				width: 128rpx;
				height: 128rpx;
				margin-bottom: 48rpx;
			}

			.sliceFont {
				line-height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 62rpx;
			}

			.openTypeFont {
				font-size: 24rpx;
				color: #a2a2a2;

				.fonts {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10px;

					image {
						margin-right: 8rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}

		.bottomText {
			font-size: 24rpx;
			color: #a2a2a2;
			text-align: center;
		}
	}




	.search-btns {
		color: #01D2D3 !important;
		background: #fff !important;
		box-shadow: 0px 2px 15px 0px rgba(205, 205, 205, 0.31) !important;
		margin-top: 40rpx !important;
	}

	.breo-top {
		width: 100%;
		background: #FFFFFF;

		.top-tabbar {
			width: 100%;
			height: 88rpx;
		}

		.top-font {
			padding: 8rpx 40rpx 16rpx;

			.font-breo {
				color: #403F5C;
				font-size: 56rpx;
				font-weight: 700;
			}

			.font-text {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #B7B6B7;
			}
		}
	}

	.breo-bottom {
		.breo-Img {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				padding: 185rpx 0 137rpx;
				width: 454rpx;
				height: 454rpx;
			}
		}

		.breo-btn {
			.search-btn {
				background: #01D2D3;
				box-shadow: 0px 2px 15px 0px rgba(1, 210, 211, 0.31);
				border-radius: 45px;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 100rpx;
				padding: 24rpx 0;
			}

			.equipment {
				margin-top: 32rpx;
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				color: #7B7B7B;
				line-height: 37rpx;
			}
		}
	}
</style>
